<template>
    <header>
        <div @click="goBack">
            <i class="iconfont">&#xe624;</i>
        </div>
        <div>
            <span>
                <slot></slot>
            </span>
        </div>
        <div @click="goHome">
            <i class="iconfont">&#xe603;</i>
        </div>
    </header>
</template>

<script>
export default {
    name:'Header',
    methods:{
        goBack(){
            this.$router.back()
        },
        goHome(){
            this.$router.push('/home')
        }
    }
}
</script>

<style lang="less" scoped>
@rootsize:37.5rem;
header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: (44 / @rootsize);
    background-color:#b0352f;
    color: #fff;
    i{  
        padding: 0 (10 / @rootsize);
        font-size: (22 / @rootsize);
    }
    span{
        font-size: (18 / @rootsize);
    }
}
</style>